<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单网页示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        h1 {
            color: #333;
        }
        p {
            line-height: 1.6;
        }
        a {
            color: #007BFF;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <header>
        <h1>欢迎来到我的简单网页</h1>
    </header>
    <main>
        <p>这是一个简单的 HTML 页面示例。</p>
        <p>你可以在这里添加更多的内容，比如图片、表格、表单等。</p>
        <p>如果你对 HTML 感兴趣，可以访问 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML" target="_blank">MDN Web 文档</a> 学习更多。</p>
    </main>
    <button id="generateRandomNumber">生成随机数</button>
    <p id="randomNumberDisplay"></p>

    <script>
        document.getElementById('generateRandomNumber').addEventListener('click', function() {
            const randomNumber = Math.floor(Math.random() * 100) + 1; // 生成1到100之间的随机数
            document.getElementById('randomNumberDisplay').textContent = '生成的随机数: ' + randomNumber;
        });
    </script>
    <footer>
        <p>&copy; 2023 我的简单网页. 保留所有权利。</p>
    </footer>
</body>
</html>